<template>
  <div>
    <div class="filter-box">
      <el-input style="width:260px;" v-model="keyword" placeholder="请输入"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="getDataList(true)">查询</el-button
      ><el-button icon="el-icon-delete" type="warning">重置</el-button
      >
    </div>
    <el-table
      highlight-current-row
      border
      :height="tableHeight"
      :header-cell-style="{
        background: '#edfdf9',
        color: '#000',
        fontWeight: '500',
        fontSize: '16px',
      }"
      :data="pageData.list"
      :default-sort="{ prop: 't.updateTime', order: 'ascending' }"
      v-loading="dataListLoading"
      ref="table"
      style="width: 100%"
    >
      <el-table-column
        prop="schoolName"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        min-width="150"
        label="学校"
      >
      </el-table-column>
      <el-table-column
        prop="className"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        min-width="150"
        label="班级"
      >
      </el-table-column>
      <el-table-column
        prop="studentName"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        min-width="150"
        label="姓名"
      >
      </el-table-column>
      <el-table-column
        prop="startDate"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        min-width="150"
        label="处方开始时间"
      >
      </el-table-column>
      <el-table-column
        prop="endDate"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        min-width="150"
        label="处方结束时间"
      >
      </el-table-column>
      <el-table-column
        prop="statusName"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        min-width="150"
        label="状态"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        min-width="150"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            style="padding: 0"
            
            @click="infoHandle(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <implementation-persons-detail
      v-if="implementationPersonsDetailVisible"
      ref="implementationPersonsDetail"
      @close="editClose"
    />
  </div>
</template>

<script>
import { clearLoginInfo, initQueryParams } from "@/utils";
import implementationPersonsDetail from "./implementation_persons_detail";

export default {
  data() {
    var defaultParams = initQueryParams();
    defaultParams.sort = 't.update_time desc';
    return {
      keyword:'',
      dataListLoading:false,
      tableHeight: document.body.clientHeight -260,
      pageData: {
        totalCount: 0,
        list: [],
        extData: {},
      },
      queryParams: defaultParams,
      implementationPersonsDetailVisible: false,
      dataListLoading: false,
      btnLoading: false,
    };
  },
  components: {implementationPersonsDetail},
  mounted: function () {
    this.getDataList(true);
  },
  activated() {
    this.getDataList(true);
  },
  updated() {
    this.$nextTick(() => {
      this.$refs["table"].doLayout();
    });
  },
  methods: {
    // 获取数据列表
    getDataList(isReload) {
      if (isReload) {
        this.queryParams.pageNo = 1;
      }
      this.dataListLoading = true;
      this.$http({
        url: this.$http.requestUrl("/sport/prescription/v1/list"),
        method: "get",
        params: this.$http.requestParams(this.queryParams),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.pageData = data.page;
          if (this.pageData && this.pageData.list) {
            this.pageData.list.forEach((i) => {
              i.className = `${i.gradeId}年级${i.classId}班`;
              i.statusName = i.status == 1 ? "执行中" : (i.status == 0 ? '已结束' : '');
            });
            console.log(this.pageData.list);
          }
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageNo = 1;
      this.getDataList(false);
    },
    // 当前页
    currentChangeHandle(val) {
      this.queryParams.pageNo = val;
      this.getDataList(false);
    },
    // 排序
    sortChange: function (column) {
      if (column.order === "descending") {
        this.queryParams.sort = column.prop + " desc";
      } else if (column.order === "ascending") {
        this.queryParams.sort = column.prop + " asc";
      }
      this.getDataList(true);
    },
    infoHandle(row) {
      this.implementationPersonsDetailVisible = true
        this.$nextTick(() => {
          this.$refs.implementationPersonsDetail.init(row)
        })
    },
    editClose() {
      this.implementationPersonsDetailVisible = false;
    }
  }
};
</script>
<style scoped lang="scss">
.filter-box {
  background: #edfdf9;
  box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
  margin-bottom:20px;
  display: flex;
  padding:15px 20px;
  border-radius:10px;
  .el-button{
      margin-left:10px;
  }
}
</style>